<template>
  <div id="order">
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:default>商品订单</template>
      <template v-slot:right></template>
    </nav-bar>
  </div>

  <van-tabs ref="tabs" @click-tab="tabClick" class="order-tab">
    <van-tab title="全部"></van-tab>
    <van-tab title="待付款"></van-tab>
    <van-tab title="已支付"></van-tab>
    <van-tab title="发货"></van-tab>
    <van-tab title="交易完成"></van-tab>
    <van-tab title="过期"></van-tab>
  </van-tabs>

  <van-pull-refresh v-model="refreshing" class="order-content" @refresh="onRefresh">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div class="order-list" v-for="item in list" :key="item.id" @click="goTo(item.id)">
        <div>订单号：{{item.order_no}}</div>
        <div>创建时间：{{item.created_at}}</div>
        <van-card v-for="sub in item.orderDetails.data" :key="sub.id"
            class="order-card"
            :num="sub.num"
            :price="sub.price + '.00'"
            :desc="sub.goods.description"
            :title="sub.goods.title"
            :thumb="sub.goods.cover_url" lazy-load
        />
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import {ref, reactive, toRefs, onMounted} from "vue";
import {useRouter} from "vue-router";
import {getOrderList} from "network/order";
import NavBar from "components/common/navbar/NavBar";

export default {
  name: "Order",
  components: {
    NavBar,
  },
  setup() {
    const router = useRouter()

    // 数据模型
    const state = reactive({
      list: [],
      page: 1,
      status: 0,
      totalPage: 0,
      loading: false,
      finished: false,
      refreshing: false,
    })

    // tabs切换，改变状态
    const tabClick = el => {
      state.status = el.name
      onRefresh()
    }

    const loadData = () => {
      getOrderList({
        page: state.page,
        status: state.status,
        include: 'orderDetails.goods'
      }).then(res => {
        state.list.push(...res.data)
        state.loading = false
        state.totalPage = res.meta.pagination.total_pages
        if (state.page >= state.totalPage) {
          state.finished = true;
        }
      })
    }

    const onLoad = () => {
      if (state.refreshing) {
        state.list = [];
        state.refreshing = false;
      }
      if (state.page < state.totalPage) {
        state.page++
      }
      loadData()
    }

    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.page = 1
      onLoad()
    }

    const goTo = id => router.push({name: 'OrderDetail', query: {id}})

    onMounted(() => {
      state.loading = true
      onLoad()
    })

    return {
      ...toRefs(state), tabClick, onLoad, onRefresh, goTo
    }
  }
}
</script>

<style scoped lang="scss">
.order-tab {
  position: fixed;
  top: 45px;
  right: 0;
  z-index: 100;
}
.order-content {
  margin: 90px 0 60px 0;
}
.order-list {
  text-align: left;
  margin-top: 10px;
  padding: 10px 20px;
  div {
    color: var(--color-text)
  }
  div:first-of-type {
    margin-bottom: 5px;
  }
}
</style>